<template>
  <div style="height: calc(100vh - 48px)">
    <div class="filter-body">
      <div slot="title" class="title">
        筛选 <span class="filter-num">{{ filteredList.length }}</span>
      </div>
      <div style="height: 64px; background: #f5f5f5"></div>
      <div class="tag-wrap" v-if="filteredList.length > 0" style="background: #fff; padding: 24px">
        <div v-for="(item, i) in filteredList" :key="i">
          <div v-if="item.value" class="filter-tag">
            <div @click="delFiltered(item.key, item.type, item.multi)">
              <div>
                <span class="tag-text">{{ `${item.title}：${item.value}` }}</span>
              </div>
              <div>
                <a-icon type="close" style="float: right; margin-top: -15px" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 24px; background: #fff">
        <div>
          <a-form-model ref="ruleForm" layout="vertical" :model="queryParam">
            <a-form-model ref="ruleForm" layout="vertical" :model="queryParam">
              <a-form-model-item v-for="(item, i) in filterDropdownList" :key="i" :label="item.title">
                <a-input
                  v-if="item.scopedSlots.filterDropdown === 'searchDropdown'"
                  placeholder="请输入"
                  v-model="queryParam[item.searchIndex]"
                />
                <a-select
                  :mode="item.multi ? 'multiple' : 'default'"
                  v-if="item.scopedSlots.filterDropdown === 'selectDropdown'"
                  placeholder="请选择"
                  allowClear
                  v-model="queryParam[`${item.searchIndex}all`]"
                  @change="(a) => changeSelect(a, item.searchIndex)"
                  :labelInValue="true"
                >
                  <a-select-option v-for="(items, i) in item.options" :key="i" :value="items.key">{{
                    items.label
                  }}</a-select-option>
                </a-select>
                <a-tree-select
                  v-if="item.scopedSlots.filterDropdown === 'selectDropdownTree'"
                  v-model="queryParam[item.searchIndex]"
                  allow-clear
                  :multiple="false"
                  placeholder="请选择"
                  style="width: 500px !important"
                  :tree-data="item.options"
                  :replaceFields="replaceFields"
                  :show-checked-strategy="SHOW_PARENT"
                  search-placeholder="请选择"
                  @change="
                    (a, b) => {
                      queryParam[`${item.searchIndex}Text`] = b[0]
                    }
                  "
                />
                <a-range-picker
                  v-if="item.scopedSlots.filterDropdown === 'datePicker'"
                  v-model="dateForm[item.searchIndex]"
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="['开始时间', '结束时间']"
                  @change="(a, b) => onOk(a, b, item.searchIndex)"
                  style="width: 100%"
                />

                <a-range-picker
                  v-if="item.scopedSlots.filterDropdown === 'datePickerNoTime'"
                  v-model="dateForm[item.searchIndex]"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="(a, b) => onNoTimeOk(a, b, item.searchIndex)"
                  style="width: 100%"
                />

                <j-select-user-by-dep
                  v-if="item.scopedSlots.filterDropdown.includes('selectPeople')"
                  v-model="queryParam[`${item.searchIndex}username`]"
                  :multi="item.multi"
                  @changeRow="(a, b, c) => onChangeUser(b || {}, item.searchIndex)"
                ></j-select-user-by-dep>
                <j-select-user-by-dep
                  v-if="item.scopedSlots.filterDropdown === 'sendPersion'"
                  v-model="queryParam[`${item.searchIndex}username`]"
                  :multi="item.multi"
                  @changeRow="(a, b, c) => onChangeUser(b || {}, item.searchIndex)"
                ></j-select-user-by-dep>
                <j-select-user-by-dep
                  v-if="item.scopedSlots.filterDropdown === 'createBy'"
                  v-model="queryParam[item.searchIndex]"
                  :multi="item.multi"
                  @changeRow="(a, b, c) => onChangeUser(b || {}, item.searchIndex)"
                ></j-select-user-by-dep>
                <j-select-user-by-dep
                  v-if="item.scopedSlots.filterDropdown === 'updateBy'"
                  v-model="queryParam[item.searchIndex]"
                  :multi="item.multi"
                  @changeRow="(a, b, c) => onChangeUser(b || {}, item.searchIndex)"
                ></j-select-user-by-dep>
                <a-input
                  @click="openIt"
                  v-if="item.scopedSlots.filterDropdown === 'selectProcess'"
                  v-model="queryParam[item.searchIndex + 'Text']"
                  placeholder="请选择"
                  :read-only="true"
                >
                  <a-icon slot="suffix" type="down" style="color: #cdcdcd; font-size: 12px" class="down-icon" />
                  <a-icon
                    slot="suffix"
                    type="close-circle"
                    theme="filled"
                    class="close-icon"
                    @click="getSelectValue(false, '', [])"
                  />
                </a-input>
              </a-form-model-item>
            </a-form-model>
          </a-form-model>
        </div>
      </div>
      <div style="height: 100px; background: #f5f5f5"></div>
      <div class="footSubmit">
        <a-button style="margin-right: 10px" @click="save(0)">重置</a-button>
        <a-button type="primary" @click="save(1)">确定</a-button>
      </div>
    </div>
    <tableSelect ref="tableSelect" @getSelectValue="getSelectValue">
      <div slot="head">
        <div class="uni-card" style="background: #fff">
          <a-form-model ref="ruleForm" layout="inline">
          </a-form-model>
        </div>
      </div>
    </tableSelect>
  </div>
</template>
<script>
import { TreeSelect } from 'ant-design-vue'
import { getObjectKeys, getObjectValues, getArr, getList } from '@/utils/util'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
import tableSelect from '@/components/tableSelect'
import moment from 'moment'

export default {
  components: {
    tableSelect,
  },
  data() {
    return {
      SHOW_PARENT,
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id',
      },
      queryParam: {},
      filterDropdownList: [],
      dateForm: [],
      processValue: '',
      processText: '',
    }
  },
  computed: {
    filteredList() {
      return [
        ...getList(getArr(Object.keys(this.queryParam), Object.values(this.queryParam)), this.filterDropdownList),
        ...getList(getArr(getObjectKeys(this.dateForm), getObjectValues(this.dateForm)), this.filterDropdownList),
      ]
    },
  },
  watch: {},
  created() {},
  methods: {
    getSelectValue(id, text, item) {
      this.$set(this.queryParam, 'processRouteSid', id)
      this.$set(this.queryParam, 'processRouteSidText', text)
    },
    openIt() {
      let par = {
        list: '/basicprocess/basicProcessRouteInfo/list',
        visible: true, //弹窗开启
        title: '工艺路线', //标题名称
        multi: false, //是否多选
        columns: [
          {
            title: '工艺编号',
            dataIndex: 'processRouteCode',
            key: 'processRouteCode',
            width: 160,
            ellipsis: true,
            scopedSlots: {
              filterDropdown: 'searchInput',
              filterIcon: 'searchIcon',
              customRender: 'processRouteCode',
            },
          },
          {
            title: '工艺名称',
            dataIndex: 'processRouteName',
            key: 'processRouteName',
            width: 160,
            ellipsis: true,
            scopedSlots: {
              filterDropdown: 'searchInput',
              filterIcon: 'searchIcon',
              customRender: 'processRouteName',
            },
          },
          {
            title: '工序',
            dataIndex: 'processesName',
            width: 160,
            key: 'processesName',
            ellipsis: true,
            scopedSlots: {},
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: true,
            width: 160,

            key: 'createTime',
            ellipsis: true,
            scopedSlots: {},
          },
          {
            title: '更新时间',
            dataIndex: 'updateTime',
            sorter: true,
            width: 160,
            key: 'updateTime',
            ellipsis: true,
            scopedSlots: {},
          },
          {
            title: '创建人',
            dataIndex: 'createBy',
            ellipsis: true,
            width: 180,
            searchIndex: 'createBy',
            options: [],
            scopedSlots: {
              filterDropdown: 'selectDropdown',
              filterIcon: 'dateIcon',
              customRender: 'createBy',
            },
          },
          {
            title: '更新人',
            dataIndex: 'updateBy',
            ellipsis: true,
            width: 180,
            searchIndex: 'updateBy',
            options: [],
            scopedSlots: {
              filterDropdown: 'selectDropdown',
              filterIcon: 'dateIcon',
              customRender: 'updateBy',
            },
          },
        ], //表格配置
        value: this.processValue, //需要回显的数据，如：id:'12323213,321312312,321312312'
        valueKey: 'sid', //需要拿到数据的key，如：id，userId等
        text: this.processText, //回显的中文，如：'张三'
        textKey: 'processRouteName', //回显的中文key
      }
      this.$refs.tableSelect.getInit(par)
    },
    treeChange(value, label, extra) {
      this.treeSelectLael = label[0]
    },
    changeSelect(v, index) {
      console.log(v, index, Array.isArray(v), '1111')
      if (v && Array.isArray(v)) {
        this.queryParam[index] = v
          .map((e) => {
            return e.key
          })
          .toString()
      } else {
        this.queryParam[index] = v ? v.key : ''
      }
    },
    getData(a, b, c) {
      this.queryParam = a
      this.dateForm = b
      this.filterDropdownList = c.filter((e) => {
        return e.scopedSlots.filterDropdown !== 'tooltip'
      })
    },
    onOk(a, b, key) {
      if (a.length == 0) {
        this.queryParam[`${key}Begin`] = ''
        this.queryParam[`${key}End`] = ''
        this.dateForm[key] = []
        return
      }
      this.dateForm[key] = b
      this.queryParam[`${key}Begin`] = b[0]
      this.queryParam[`${key}End`] = b[1]
    },
    onNoTimeOk(a, b, key){
      if (a.length == 0) {
        this.queryParam[`${key}Begin`] = ''
        this.queryParam[`${key}End`] = ''
        this.dateForm[key] = []
        return
      }
      this.dateForm[key] = b
      this.queryParam[`${key}Begin`] = moment(b[0]).startOf('date').format('YYYY-MM-DD HH:mm:ss')
      this.queryParam[`${key}End`] = moment(b[1]).endOf('date').format('YYYY-MM-DD HH:mm:ss')
    },
    onChangeUser(v, index) {
      this.queryParam[index] = v
        .map((e) => {
          return e.id
        })
        .toString()
      this.queryParam[`${index}realname`] = v
        .map((e) => {
          return e.realname
        })
        .toString()
      this.queryParam[`${index}username`] = v
        .map((e) => {
          return e.username
        })
        .toString()
    },
    save(e) {
      if (e === 0) {
        this.queryParam = {}
        this.dateForm = []
      }
      this.$nextTick(() => {
        this.$emit(
          'searchDate',
          e === 1 ? this.queryParam : {},
          e === 1 ? this.dateForm : [],
          e === 1 ? this.filteredList.length : 0,
          e
        )
      })
    },
    delFiltered(a, b, c) {
      console.log(a, b, c, 'del')
      if (b == 0) {
        this.queryParam[a] = ''
        this.queryParam[`${a}all`] = c ? [] : {}
      } else if (b == 1) {
        this.queryParam[a] = ''
        this.queryParam[`${a}realname`] = ''
        this.queryParam[`${a}username`] = ''
      } else if (b == 2) {
        this.queryParam[`${a}Begin`] = ''
        this.queryParam[`${a}End`] = ''
        this.dateForm[a] = []
      } else if (b == 4) {
        this.queryParam[`${a}Text`] = ''
        this.queryParam[a] = ''
      } else {
        this.queryParam[a] = ''
      }
      console.log(this.queryParam, this.dateForm, this.filteredList)
    },
  },
}
</script>
<style scoped lang="less">
.title {
  font-size: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  padding: 24px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9;
}
.filter-num {
  color: #1890ff;
}
.footSubmit {
  padding: 10px 16px;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 500px;
  border-top: 1px solid #f5f5f5;
  z-index: 99999;
}
.tag-wrap {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-tag {
  background: #f4f5f6;
  border-radius: 4px;
  margin-top: 10px;
  margin-right: 10px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
}
.tag-text {
  margin-right: 20px;
  max-width: 412px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
